import React from 'react'

// 组件生命周期: 从创建到销毁的过程 
// 钩子函数: 在组件的不同的生命周期阶段 时机成熟 自动执行的函数

// 1. 挂载时

// constructor  ->  render -> componentDidMount

// 注意：
// 1. constructor函数中 调用一个super() 正确的绑定this
// 2. 生命周期函数的书写顺序不做要求 通常规范写法 render写到最后

// 各自完成什么事儿？
// 1. componentDidMount   发送网络请求 + 操作dom   只会在初始化的时候执行一次
// 2. render  只做返回JSX模板的事情  千万不要在里面执行  this.setState 否则造成递归死循环

// 2. 更新时 [但凡组件因为一些因素重新渲染了 setState + props + forceUpdate]

// render -> componentDidUpdate

// 只要组件发生重新渲染 他们俩就会按照顺序依次执行

// 注意: componentDidUpdate函数中也不要尝试调用setState进行更新

// 3. 卸载时

// componentWillUnmount   做一些清除的工作  清除定时器  组件销毁时只执行一次
// 销毁一个组件的做法: 通过一个属性的切换 让组件显示或者不显示 在不显示的时候就是被销毁了
// { flag? <Son/> : null}

class Son extends React.Component{
  componentWillUnmount(){
    console.log('组件被销毁了');
  }
  render(){
    return <div>this is son</div>
  }
}

class App extends React.Component {
  constructor(){
    console.log('constructor');
    super()
  }

  state = {
    count:0,
    flag: true
  }

  componentDidMount(){
    console.log('mounted');
  }

  componentDidUpdate(){
    console.log('组件更新了');
  }

  onChange = ()=>{
    this.setState({
      flag: false
    })
  }

  render () {
   
    return (
      <div>
        {/* 这里的flag如果是false Son组件就会被销毁 */}
        { this.state.flag ? <Son/>:null }
        <button onClick={ this.onChange }>change</button>
      </div>
    )
  }
}

export default App